<template>
    <div class="vocalist">
        <ul class="m-cvrlst ">
              <li v-for="(item , index) in vocalistData" :key="index">
                <div class="u-cover u-cover-alb2">
                    <a href="javascript:;">
                        <img :src="item.blurPicUrl">
                        <span title="晚风" class="msk"></span>
                    </a>
                    <a href="javascript:;" class="icon-play f-alpha f-fr "></a>
                </div>
                 <p class="dec">
                     <a href="javascript:;" class="tit f-thide s-fc0" title="晚风">
                     <span class="s-fc7">{{item.name}}</span>
                     </a>
                </p>
                <p>
                    <span class="nm f-thide" title="Copy">
                    <a href="/artist?id=32897995" class="s-fc3">{{item.artist.name}}</a>
                    </span>
                </p>
             </li>

             
        </ul>
    </div>
</template>

<script>
 import {searchResult} from "../../../network/search"
export default {
    props:["keywords"],
    data() {
        return {
            vocalistData:[]
        }
    },
    methods:{
         Result(keywords){
            searchResult(keywords,20, 0 ,10).then(res => {
              for(const item of res.data.result.albums){
                  this.vocalistData.push(item)
              }
          })
       },
    },
    created(){
        this.Result(this.keywords)
    },
    watch:{
       keywords(value){
           this.vocalistData = []
           this.Result(value)
       }
   }
}
</script>


<style scoped>
    .vocalist{width: 100%;margin-top: 20px;}
    .m-cvrlst{ margin: 0 0 0 -33px;width: 103%;min-height: 300px;}
    .m-cvrlst li { width: 155px;height: 178px; padding-left: 35px; float: left; display: inline-block;overflow: hidden;padding-bottom: 50px;line-height: 1.4;}
    .u-cover {  position: relative;  display: block;}
    .u-cover-alb2 {width: 130px;  height: 130px;}
    .u-cover img {display: block;  width: 100%;  height: 100%; }
    a{ cursor: pointer;  text-decoration: none; color: #333; }
    .u-cover-alb2 .msk {  width: 153px;  height: 130px;  display: block;  background: url("../../../assets/imgs/coverall.png") no-repeat;  background-position: 0 -845px;  position: absolute; top: 0; left: 0;}
    .u-cover-alb2 .icon-play{display: block;position: absolute;    left: 94px;width: 28px; height: 28px;top: 97px;}
    .icon-play:hover{background: url("https://s2.music.126.net/style/web2/img/ie6/icn_ply2.png?69fd1b2333a963a9ff52a64da6c37a86");}
    

    .m-cvrlst li .dec {
        margin: 8px 0 3px;
        font-size: 14px;
    }
    .m-cvrlst li p{
         width: 100%;
          padding: 0;
          margin: 0;
    }
    .m-cvrlst li .tit {
        display: inline-block;
        max-width: 100%;
        width: 100%;
        vertical-align: middle;
    }
   .f-thide {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }
        .m-cvrlst li .nm {
        display: inline-block;
        max-width: 85%;
        vertical-align: middle;

    }
    .f-thide {

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }
    .f-thide .s-fc3 {
            color: #666;
            font-size: 12px;
        }
</style>